import { useEffect, useMemo, useRef, type CSSProperties } from "react";
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
// import { ScrollContainer } from "@/components/Container";
import { WrapperPropsType, WrapperPropsDefault } from "../props";
import { nextTick } from "@/utils";
import "../style/ModalWrapper.less";

const ModalWrapper = (props: WrapperPropsType & ComponentNode) => {
	// fix React18 "defaultProps" problem
	props = Object.assign({}, { ...WrapperPropsDefault, ...props });

	const wrapperRef = useRef<ComponentRef>(null);
	const spinRef = useRef<ElRef>(null);
	const realHeightRef = useRef(0);
	const minRealHeightRef = useRef(0);
	const realHeight = useRef(0);

	const stopElResizeFn: Fn = () => {};

	useWindowSizeFn(setModalHeight.bind(null));

	// useMutationObserver(
	// 	spinRef,
	// 	() => {
	// 		setModalHeight();
	// 	},
	// 	{
	// 		attributes: true,
	// 		subtree: true
	// 	}
	// );

	// createModalContext({
	// 	redoModalHeight: setModalHeight
	// });

	const spinStyle = useMemo((): CSSProperties => {
		return {
			minHeight: `${props.minHeight}px`,
			[props.fullScreen ? "height" : "maxHeight"]: `${realHeightRef.current}px`
		};
	}, [props.minHeight, props.fullScreen]);

	// async function scrollTop() {
	// 	nextTick(() => {
	// 		const wrapperRefDom = wrapperRef.current;
	// 		if (!wrapperRefDom) return;
	// 		(wrapperRefDom as any)?.scrollTo?.(0);
	// 	});
	// }

	async function setModalHeight() {
		// 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
		// 加上这个,就必须在使用的时候传递父级的open
		if (!props.open) return;
		const wrapperRefDom = wrapperRef.current;
		if (!wrapperRefDom) return;

		const bodyDom = wrapperRefDom?.parentElement;
		if (!bodyDom) return;
		bodyDom.style.padding = "0";
		await nextTick();

		try {
			const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
			if (!modalDom) return;

			const modalRect = getComputedStyle(modalDom as Element).top;
			const modalTop = Number.parseInt(modalRect);
			let maxHeight =
				window.innerHeight - modalTop * 2 + (props.footerOffset! || 0) - props.modalFooterHeight - props.modalHeaderHeight;

			// 距离顶部过进会出现滚动条
			if (modalTop < 40) maxHeight -= 26;

			await nextTick();
			const spinEl = spinRef.current;

			if (!spinEl) return;
			await nextTick();
			// if (!realHeight) {
			realHeight.current = spinEl.scrollHeight;
			// }

			if (props.fullScreen) realHeightRef.current = window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight - 28;
			else realHeightRef.current = props.height ? props.height : realHeight.current > maxHeight ? maxHeight : realHeight.current;

			// emit("heightChange", unref(realHeightRef));
		} catch (error) {
			console.log(error);
		}
	}

	/** Effect */
	useEffect(() => {
		props.useWrapper && setModalHeight();
		// const { modalHeaderHeight, modalFooterHeight } = props;
		// emit("extHeight", modalHeaderHeight + modalFooterHeight);
		// console.log("extHeight", modalHeaderHeight + modalFooterHeight);
		return () => {
			// clean
			wrapperRef.current = null;
			spinRef.current = null;
			realHeightRef.current = 0;
			minRealHeightRef.current = 0;
			realHeight.current = 0;
			stopElResizeFn && stopElResizeFn();
		};
	}, []);

	useEffect(() => {
		setModalHeight();
		if (!props.fullScreen) realHeightRef.current = minRealHeightRef.current;
		else minRealHeightRef.current = realHeightRef.current;
	}, [props.fullScreen]);

	// defineExpose({ scrollTop });

	return (
		// <ScrollContainer ref={wrapperRef} scrollHeight={realHeight}>
		<div className="scrollContainer">
			<div style={spinStyle}>{props.children}</div>
		</div>
		// </ScrollContainer>
	);
};

export default ModalWrapper;
